<template>
  <div class="set-userinfo">
    <el-form class="userinfo" :model="userInfo" ref="setUserInfoRef" :rules="rules" label-width="100px">
      <el-form-item>
        <h2>编辑个人信息</h2>
      </el-form-item>
      <el-form-item label="昵称：" prop="nickname">
        <el-input v-model="userInfo.nickname" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="介绍：" prop="signature">
        <el-input :rows="2" type="textarea" v-model="userInfo.signature" placeholder="请输入介绍内容">></el-input>
      </el-form-item>
      <el-form-item label="性别：" prop="gender">
        <el-radio-group v-model="userInfo.gender">
          <el-radio :label="0" size="large">保密</el-radio>
          <el-radio :label="1" size="large">男</el-radio>
          <el-radio :label="2" size="large">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日：" prop="birthday">
        <el-date-picker value-format="x" v-model="userInfo.birthday" type="date" placeholder="请输入出生日期"/>
      </el-form-item>
      <el-form-item label="地区：" prop="pAc">
         <el-cascader v-model="userInfo.pAc" :options="options" @change="handleChange" placeholder="请选择地区"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSubmit" type="primary">确定</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="avator">
      <el-row>
        <el-col class="tac">
          <el-avatar shape="square" :src="avatarUrl" :size="200"></el-avatar>
        </el-col>
      </el-row>
      <el-row class="mt20">
        <el-col class="tac">
            <el-button @click="handleAvatarButtonClick">更换头像</el-button>
            <input
              ref="fileRef"
              class="dn"
              type="file"
              @change="handleFileChange"
            />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {reactive,ref,getCurrentInstance,computed} from 'vue'
import {useRouter} from 'vue-router'
import {useUserStore} from '@/store/userInfo'
import {provinceAndCityData} from 'element-china-area-data'
import {ElMessage} from 'element-plus'
const {proxy}=getCurrentInstance()
const userStore=useUserStore()
const cookie=userStore.cookie
const router = useRouter()
const avatarUrl=ref(userStore.userInfo.detail.profile.avatarUrl)
let userInfo=reactive({
  nickname:'',
  signature:'',
  gender:0,
  birthday:'',
  province:null,
  city:null,
  pAc:[]
})
let rules=reactive({
  nickname:[{ required: true, message: '请输入昵称', trigger: 'blur' }]
})
let options=ref(provinceAndCityData)
let handleChange=()=>{
  userInfo.province=userInfo.pAc['0']
  userInfo.city=userInfo.pAc['1']
}
let setUserInfo=async()=>{
  const {pAc,...params}=userInfo
  let {code,message}=await proxy.$api.userUpdate(params)
  if(code===200){
    proxy.$message({
      type:'success',
      message:'更新成功'
    })
    await updateDetail()
    router.push({path:'/'},()=>{})
  }else{
    proxy.$message({
      type:'error',
      message
    })
  }
}
let updateDetail=async()=>{
  let {code,...data}=await proxy.$api.userDetail({uid:userStore.uid})
  userStore.saveUserInfo('detail',data)
}
let handleSubmit=()=>{
  proxy.$refs.setUserInfoRef.validate(async(callback)=>{
    if(callback){
      await setUserInfo()
    }else{
      proxy.$message({
        type:'error',
        message:'请填写必要信息'
      })
    }
  })
}
let handleReset=()=>{
  proxy.$refs.setUserInfoRef.resetFields()
}
let handleAvatarButtonClick=()=>{
  proxy.$refs.fileRef.click()
}
let handleFileChange=async(e)=>{
  const file=e.target.files[0]
  let {code}=await proxy.$api.updateAvatar(file)
  if(code===200){
    ElMessage.success('更新成功!')
    await updateDetail()
    router.push({path:'/'},()=>{})
    console.log(avatarUrl.value);
  }else{
    ElMessage.error('更新失败!')
  }
}
</script>
<style lang="scss">
.set-userinfo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .userinfo {
    width: 700px;
  }
  .avator {
    width: 300px;
  }
}
</style>
